<script setup lang="ts">
import type {FormInstance, FormRules} from "element-plus";

definePageMeta({
  layout:'admin',
  title:'修改配置',
});
type FormParams={
  mark_up_price:number,
  agent_fee:number,
  agent_deposit:number,
  fxied_price:number,
  push_price:number,
  withdrawal_fee:number,
}
const rules=reactive<FormRules<FormParams>>({
  mark_up_price:[
    {required:true,message:'请输入加价比例',trigger:'blur'},
    {pattern:/^\d+(\.\d{1,2})?$/,message:'请输入正确的加价比例',trigger:'blur'},
    {validator:(rule,value,callback)=>{
      if(value>100){
        callback(new Error('加价比例不能大于100'));
      }else{
        callback();
      }
    },trigger:'blur'},
  ],
  agent_fee:[
    {required:true,message:'请输入代理费',trigger:'blur'},
    {pattern:/^\d+(\.\d{1,2})?$/,message:'请输入正确的代理费',trigger:'blur'},
    {validator:(rule,value,callback)=>{
      if(value>100){
        callback(new Error('代理费不能大于100'));
      }else{
        callback();
      }
    },trigger:'blur'},
  ],
  agent_deposit:[
    {required:true,message:'请输入代理押金',trigger:'blur'},
    {pattern:/^\d+(\.\d{1,2})?$/,message:'请输入正确的代理押金',trigger:'blur'}
  ],
  fxied_price:[
    {required:true,message:'请输入一口价抽成比例',trigger:'blur'},
    {pattern:/^\d+(\.\d{1,2})?$/,message:'请输入正确的抽成比例',trigger:'blur'},
    {validator:(rule,value,callback)=>{
      if(value>100){
        callback(new Error('固定价格不能大于100'));
      }else{
        callback();
      }
    },trigger:'blur'},
  ],
  push_price:[
    {required:true,message:'请输入push价格抽成比例',trigger:'blur'},
    {pattern:/^\d+(\.\d{1,2})?$/,message:'请输入正确的推送价格',trigger:'blur'},
    {validator:(rule,value,callback)=>{
      if(value>100){
        callback(new Error('推送价格不能大于100'));
      }else{
        callback();
      }
    },trigger:'blur'},
  ],
  withdrawal_fee:[
    {required:true,message:'请输入提现手续费（比例）',trigger:'blur'},
    {pattern:/^\d+(\.\d{1,2})?$/,message:'请输入正确的提现手续费',trigger:'blur'},
    {validator:(rule,value,callback)=>{
      if(value>100){
        callback(new Error('提现手续费不能大于100'));
      }else{
        callback();
      }
    },trigger:'blur'},
  ],
})
const formRef=ref<FormInstance>();
const form =reactive<FormParams>({
  mark_up_price:'',//'11.00',
  agent_fee:'',//25.00,
  agent_deposit:'',//200.00,
  fxied_price:'',//15.00,
  push_price:'',//10.00,
  withdrawal_fee:'',//5.00,
})
const {data:info,refresh}=await useServerGet('/backend/config/detail');
if(info.value.code==200){
  if(info.value?.data){
    for(let key in info.value.data){
      form[key]=info.value.data?.[key]?.value;
    }
  }
}
const submit=async ()=>{
  if(formRef.value){
    await formRef.value?.validate(async (valid,invalidFields)=>{
      if(valid){
        const {code}=await usePost('/backend/config/update',form)
        if(code===200){
          ElMessage.success('修改成功')
          const router=useRouter();
          router.replace('/backend/setting')
        }
      }else{
        showFieldsError(invalidFields);
      }
    })
  }
}
</script>

<template>
  <el-card >
    <div class="mt-4 mb-10">
    <el-button><NuxtLink to="/backend/setting">返回</NuxtLink></el-button>
    <h1 class="text-center">编辑配置</h1>
    </div>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="200px" class="w-[500px] mx-auto">
      <template v-if="info.data">
        <el-form-item :label="item.remark" :prop="key" v-for="(item,key) in info.data">
          <el-input v-model="form[key]" :placeholder="`请输入${item.remark}`" clearable></el-input>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>

  </el-card>
</template>

<style scoped lang="scss">

</style>